<!DOCTYPE html>
<html>
	<head>
	<title>K-均值聚类</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<style>
			html { overflow-x: hidden; overflow-y: hidden; }
			.title
			{
				position:absolute;
				top:5px;
				left:50%;
				transform:translate(-50%,0px);
				height:40px;
				font-size:40px;
				padding:15px;
				line-height:40px;
				text-align:center;
				background-color:#000;
				color:#fff;
				border-radius:20px;
				cursor:pointer;
			}
			.k
			{
				position:absolute;
				width:100px;
				height:30px;
				border:none;
				outline:none;
				background-color:#1E90FF;
				color:#fff;
				border-radius:10px;
				padding:10px;
				font-size:30px;
				right:50.5%;
				bottom:10px;
				text-align:center;
			}
			.go
			{
				position:absolute;
				width:100px;
				height:30px;
				border:none;
				outline:none;
				background-color:#00cc47;
				color:#fff;
				border-radius:10px;
				padding:10px;
				font-size:30px;
				left:50.5%;
				bottom:10px;
				text-align:center;
				line-height:30px;
				cursor:pointer;
			}
		</style>
		<script type="text/javascript">
			window.X=new Array();
			window.Y=new Array();
			function draw(e,X,Y) 
			{
				canvas=document.getElementById("points");
			    var ctx=canvas.getContext("2d");
				event=e||window.event;
			    var rect = canvas.getBoundingClientRect();
			    x = event.clientX - rect.left * (canvas.width / rect.width);
			    y = event.clientY - rect.top * (canvas.height / rect.height);
			    ctx.beginPath();
				ctx.arc(x,y,5,0,2*Math.PI);
				ctx.closePath();
            	ctx.fillStyle="#00cc47";
            	ctx.fill();
            	X.splice(0,0,x);
            	Y.splice(0,0,y);
			}

			function ansys_()
			{
				//随机初始化聚类中心
				var k=parseInt(document.getElementById("k").value);
				window.means_x=new Array(k);
				window.means_y=new Array(k);
				for (var i=0;i<k;i++)
				{
					var state=0;
					while(state==0)
					{
						var z=Math.floor(Math.random()*X.length);
						var temp_x=X[z];
						var	temp_y=Y[z];
						var state2=0;
						for (var j=0;j<means_x.length;j++)
						{
							if (temp_x==means_x[j] && temp_y==means_y[j])
							{
								state2=1;
							}
						}
						if (state2==0)
						{
							state=1;
							means_x[i]=temp_x;
							means_y[i]=temp_y;
						}						
					}
				}
				for (var z=0;z<k;z++)
				{
					var x=means_x[z];
					var y=means_y[z];
				}
				draw_point();
				setTimeout(function(){ansys(k)},500);
			}

			function ansys(k)
			{
				for (var z=0;z<k;z++)
				{
					eval("gx"+z+"=new Array()");
					eval("gy"+z+"=new Array()");
				}
				for (var i=0;i<X.length;i++)
				{
					var min=999999999999999;
					var m=0;
					var x=X[i];
					var y=Y[i];
					for (var j=0;j<k;j++)
					{
						var dx=x-means_x[j];
						var dy=y-means_y[j];
						var d=dx*dx+dy*dy;
						if (d<min)
						{
							min=d;
							m=j;
						}
					}
					eval("gx"+m+".splice(gx"+m+".length,0,"+x+")");
					eval("gy"+m+".splice(gy"+m+".length,0,"+y+")");
				}
				for (var z=0;z<k;z++)
				{
					var temp_x=eval("gx"+z);
					var temp_y=eval("gy"+z);
					var sumx=0;
					var sumy=0;
					for (var i=0;i<temp_x.length;i++)
					{
						sumx+=temp_x[i];
						sumy+=temp_y[i];
					}
					var mean_x=sumx/temp_x.length;
					var mean_y=sumy/temp_y.length;
					means_x[z]=mean_x;
					means_y[z]=mean_y;
				}
				draw_point();
				setTimeout(function(){ansys(k)},500);
			}

			function draw_point()
			{				
				var canvas=document.getElementById("points");
			    var ctx=canvas.getContext("2d");
			    canvas.width=canvas.width;
			    var k=means_x.length;
			    for (var i=0;i<X.length;i++)
			    {
			    	var x=X[i];
			    	var y=Y[i];
					ctx.beginPath();
					ctx.arc(x,y,5,0,2*Math.PI);
					ctx.closePath();
	            	ctx.fillStyle="#00cc47";
	            	ctx.fill();
			    }
			    for (var i=0;i<k;i++)
			    {
			    	var x=means_x[i];
			    	var y=means_y[i];
					ctx.beginPath();
					ctx.arc(x,y,10,0,2*Math.PI);
					ctx.closePath();
	            	ctx.fillStyle="red";
	            	ctx.fill();
			    }
			}
		</script>
	</head>
	<body style="background-color:#bbb" onselectstart="return false">
		<canvas id="line" style="position:absolute;width:1280px;background-color:#eee;height:720px;top:50%;left:50%;transform:translate(-50%,-50%);z-index:-2;box-shadow:30px 30px 100px #aaa;" height="720" width="1280"></canvas>
		<canvas id="points" onclick="draw(event,X,Y)" style="position:absolute;width:1280px;height:720px;top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1;cursor:pointer;" height="720" width="1280"></canvas>
		<div class="title" onclick="ansys_()">K-均值聚类</div>
		<input type="text" class="k" id="k" value="3">
		<div class="go" onclick="ansys_()">Go</div>
	</body>
</html>